/*
  学习目标：this指向处理的三种办法
  原理: 通过箭头函数, 自动绑定this
  步骤：
     1. ✅react自带结构体中, this指向组件实例对象,  React底层处理过
     2. 💥react非自带结构体中, this指向undefined
  方法: 
    1. 👍通过箭头函数, 定义事件处理函数
    2. 通过render函数内, 通过箭头函数, 绑定this
    3. 👎通过bind
*/

import React, { Component } from 'react';

export default class App extends Component {
  // 👍 1. 通过箭头函数, 定义事件处理函数
  handleClick = () => {
    console.log('this  ----->  ', this);
  };

  handleXxxx() {
    console.log('this  ----->  ', this);
  }
  render() {
    // ✅react自带结构体中,
    console.log('this  ----->  ', this);
    return (
      <div>
        <button onClick={this.handleXxxx.bind(this)}>删除3</button>
        <button onClick={this.handleClick}>删除2</button>
        <button
          //  2. 通过render函数内, 通过箭头函数, 绑定事件处理函数
          onClick={() => this.handleXxxx()}
        >
          删除1
        </button>
      </div>
    );
  }
}
